<template>
	<div>
		<div class="containinfo">
			<el-card>

				<img :src="picture" class="imginfo" />
				<div class="divinfo">
					<h2 class="hinfo">{{ name }}</h2>
					<span>{{ description }}</span>

				</div>
				<div class='rateinfo'>
					<label>评分</label>
					<el-rate v-model="value" show-text>
					</el-rate>
				</div>
			</el-card>

		</div>
		<h3 class="titleinfo">相关推荐</h3>
		<div id="waterfall">
			<span v-for='item in items' :key='item.id'><img :src='item.picture'></span>
		</div>
		<comment></comment>
	</div>
</template>

<script>
	import '../assets/css/info/waterfall.css'
	import comment from './comment.vue'
	export default {
		name: 'info',
		components: {
			comment
		},
		data() {
			return {
				description: this.$route.params.description,
				name: this.$route.params.name,
				picture: this.$route.params.picture,
				id: this.$route.params.id,
				value: null,
				items: [{
						id: 1,
						picture: require("../assets/images/imgs/2.jpg")
					},
					{
						id: 2,
						picture: require("../assets/images/imgs/8.jpg")
					},
					{
						id: 3,
						picture: require("../assets/images/imgs/7.jpg")
					},
					{
						id: 4,
						picture: require("../assets/images/imgs/6.jpg")
					},
					{
						id: 5,
						picture: require("../assets/images/imgs/5.jpg")

					}
				]
			}
		},
		mounted() {
			// description = this.$route.query.description;
			// name = this.$route.query.name;
			console.log(this.name)
		}
	}
</script>

<style>
	.containinfo {
		margin-left: 10%;
		margin-right: 10%;
		margin-top: 2%;
	}

	.imginfo {
		width: 20%;
		height: 20%;
		float: left;
	}

	.rateinfo {
		margin-left: 80%;
		margin-top: 10%;
	}

	.titleinfo {
		font-family: 华文行楷;
		font-size: 50px;
		margin-left: 5%;
		margin-top: 2%;
	}
	.divinfo {
		margin-left: 25%;
	}
	.hinfo {
		font-size: 30px;
	}
</style>
